<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="/css/bootstrap.min.css" rel="stylesheet">
        <link href="/js/bootstrap.min.js" rel="stylesheet">
        <title>购票</title>
    </head>
    <style>
        .div1
        {
            font-size: 35px;
            font-weight: 750;
        }
        .div2
        {
            font-size: 25px;
            font-weight: 500;
            
        }
        .div3
        {
            border: 1px solid rgba(32, 31, 31, 0.2);
            border-bottom: 0px;
            border-top: 0px;
        }
        .div4
        {
            
        }
        .div5
        {
            color: red;
            font-size: 70px;
            font-weight: 800;
        }
        .div6
        {
            color: rgba(148, 137, 137, 0.836);
            font-size: 30px;
        }
        .div7
        {
        color: orange;
        font-size: 30px;
        font-weight: 1000;
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
        .font_a
        {
            color: gray;
            font-size: 25px;
            font-weight: 800;
        }
        .font_b
        {
            color: cornflowerblue;
            font-size: 25px;
            font-weight: 800;
        }
        .span1
        {
            color: orange;
            font-size: 30px;
            font-weight: 600;
        }
        .span2
        {
            font-size: 40px;
            font-weight: 600;
        }
        .sm1
        {
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        color: rgba(126, 117, 117, 0.836);
        }
        .ul1
        {
            font-size: 25px;
        }
        .sp
        {
            color: orange;
        }
        .button2
        {
            font-size: 15px;
            background-color: orange;
            color: white;
        }
    </style>
    <script>
        function purchase(){
            // <!--之后要添加相关信息-->
            alert("预定成功!");
        }
        function cancle(){
            alert("已经为您取消预订!");
        }
    </script>
    <script>
        var maxMinute = 10 * 60;    // 10分钟,以秒为单位计算
        function countTime() {
            if(maxMinute >= 0) {
                maxMinute--;
                $('minute').innerText = addzero(Math.floor(maxMinute / 60)+':');  
            //分钟
                $('second').innerText = addzero(Math.floor(maxMinute % 60));  //秒
            }
        }
    
                timer = setInterval("countTime()",1000);
                
        function addzero(num) {
            return num < 10 ?('0'+num):num;
        }
        function $(id) {
            return typeof id === 'string'?document.getElementById(id):null;
        }
    </script>
    <body>
        <div class="container-fluid mt-2 shadow" style="background-color:white; height: 100px;">
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-2 div1 text-center" style="background-color: orange;">
                    电影网<br>www.dyw.cn
                </div>
                <div class="col-md-1"></div>
                <div class="col-md-4 row">
                    <div class="col-md-3 mt-4">
                        <a href="/index.jsp" class="font_a">首页</a>
                    </div>
                    <div class="col-md-3 mt-4">
                        <a href="index_movie.html" class="font_a">电影</a>
                    </div>
                    <div class="col-md-3 mt-4">
                        <a href="index_cinema.html" class="font_a">影院</a>
                    </div>
                    <div class="col-md-3 mt-4">
                        <a href="index_information.html" class="font_a">资讯</a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="row"> 
                        <div class="col-md-6"></div>
                        <div class="col-md-2 mt-4">
                            <a href="login.html" class="font_b">登录</a>
                        </div>
                        <div class="col-md-4 mt-4">
                            <a href="regist.html" class="font_a">免费注册</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container mt-3">
            <div class="col-sm-12 div1 text-center"style="background-color: rgb(209, 209, 209);">订单信息</div>
            <hr>
            <div class="row mt-3">
                <div class="col-md-4 div2 text-center">
                    <img src="/Picture/爱情神话.png" style="width: 85%;" class="ml-2 mt-2">
                    <br>
                </div>
                <div class="col-md-4 div3">
                    <ul class=" ul1">
                        <li>影片:<small> 爱情神话</small></li>
                        <li>影院: <small>郑州万达影城</small></li>
                        <li>场次: <small>2022.1.26 周五 19:20</small></li>
                        <li>座位: <small>7排1号，7排2号</small></li>
                        <li>语言: <small>国语</small></li>
                        <li>影厅: <small>激光影厅</small></li>
                    </ul>
                    <br><br><br><br>
                    
                </div>
                <div class="col-md-4 div4">
                    <div class="span2 ">
                        价格:<strong style="color: red;">86.00</strong>元</div>
                    
                    <div class="span2">
                        剩余时间:
                    </div>
                    <div class="div5 text-center">
                        <span id="minute">10:</span>
                        <span id="second">&nbsp;00</span>
                    </div>
                    <br><br><br><br><br><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-circle button2 mt-1" onclick="purchase()">确认支付</button>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-circle button2 mt-1" onclick="cancle()">
                        <a href="/index.jsp">取消订单</a>
                    </button>
                    
                </div>
            </div>
            <br>
            <hr>
            <div style="font-size: 25px; font-weight: 500;">
                <span style="color: red; font-size: 30px; font-weight: 600;" class="text-right">注意:</span>
                订单是不可以退的喔~请在十分钟之内提交订单，否则系统将释放订单~
            </div>
        </div>
        <div class="container-fluid mt-3" style="background-color: rgb(218, 211, 211);">
            <div class="row">
                <div class="col-md-2 div7 text-center mt-3">
                    电影网<br>www.dyw.cn
                </div>
                <div class="col-md-4"></div>
                <div class="col-md-3 div6 mt-3">
                    <span style="color: black;">客服电话: 410-647-6688</span><br>
                    <small><h4>服务时间: 9:00-21:00</h4></small>
                </div>
                <div class="col-md-3 div6 mt-3">
                    <small><h4>企业团购请详细咨询</h4></small>
                    <span style="color: black;">电话: 13461582649</span>
                </div>
            </div>
            <hr>
            <small class="sm1">豫ICP备15698号-1 Copyright @2022-2025 dyw.cn 版权所有 电影网(郑州) 网络科技有限大学</small>
        </div>
    </body>
</html>
